<template>
  <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
    <!-- <el-menu-item index="0">
      <img
        style="width: 100px"
        
        alt="Element logo"
      />
    </el-menu-item> -->
    <el-menu-item index="0"
      ><div class="guanggu">光谷智慧交通</div></el-menu-item
    >
    <slot></slot>
    <!-- <traffic-conditions></traffic-conditions> -->
    <!-- <el-menu-item >视频监控</el-menu-item>
    <el-menu-item >事件添加</el-menu-item>
    <el-menu-item>事件查询</el-menu-item>
    <el-menu-item >事件更新</el-menu-item>
    <el-menu-item>发布公告</el-menu-item>
    <el-menu-item >路况信息</el-menu-item>
    <el-sub-menu index="8">
      <template #title>工具箱</template>
      <el-menu-item index="8-1">测量</el-menu-item>
      <el-menu-item index="8-2">测量</el-menu-item>
      <el-menu-item index="8-3">测量</el-menu-item>
    </el-sub-menu>
    <el-menu-item >用户信息</el-menu-item>
    <el-menu-item index="10">
      <el-input
        v-model="input"
        style="width: 240px"
        placeholder="请输入交通事故查询信息"
      />
      <el-button>查询</el-button>
    </el-menu-item>
    <el-sub-menu index="11">
      <template #title>admin</template>
      <el-menu-item index="11-1">item one</el-menu-item>
      <el-menu-item index="11-2">item two</el-menu-item>
    </el-sub-menu> -->
  </el-menu>
</template>

<script setup></script>

<style>
.el-menu-demo {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
}
.guanggu {
  font-size: 25px;
  font-weight: 900;
  text-decoration: none;
}
.el-menu-item:nth-child(1).is-active {
  background-color: transparent !important; /* 取消背景色 */
  color: inherit !important; /* 恢复字体颜色 */
}
.el-menu-item:nth-child(1):hover {
  background-color: transparent !important; /* 取消悬停时的背景色 */
}
/* 去除默认的底部边框 */
.el-menu-item.is-active {
  border-bottom: none !important; /* 取消底部边框 */
}
.el-menu-item {
  border-bottom: none; /* 默认情况下没有底部边框 */
}
.el-sub-menu .el-menu-item {
  font-size: 14px; /* 设置你希望的统一字体大小 */
}
</style>
